<template>
  <div>
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <el-input v-model="params.enterprise_name" placeholder="企业名称查询" clearable>
          <i class="el-icon-search el-input__icon" slot="suffix" @click="getData()"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          clearable
          v-model="params['type.eq']"
          :options="enumExType"
          placeholder="异常类型"
          @change="getData()"
        ></c-select>
      </el-form-item>

      <el-form-item>
        <c-select
          clearable
          v-model="params['pay_status.eq']"
          :options="enumPayStatus"
          placeholder="缴费状态"
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          clearable
          v-model="params['ex_handle_status.eq']"
          :options="enumExStatus"
          placeholder="核实状态"
          @change="getData()"
        ></c-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
      <div class="text-muted">
        <div>合计：</div>
        项目总数：
        <span class="text-primary">{{ totalCount || '-' }}</span>
      </div>
    </el-form>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:person="scope">
        <span>
          {{ +(scope.row.ex_handle_status || '') > 0 ? '已完成' : scope.row.ex_handle_person }}
        </span>
        <div>{{ $utils.dateFormat(scope.row.ex_handle_time, 'yyyy-MM-dd') }}</div>
      </template>
      <template v-slot:status="scope">
        <span class="badge" :class="`badge-${scope.row.statusStyle}`">
          {{ scope.row.status }}
        </span>
      </template>
      <template v-slot:inStatus="scope">
        <span class="badge" :class="`badge-${scope.row.invoiceStyle}`">
          {{ scope.row.invoiceStatus }}
        </span>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <info-view
      :visible.sync="infoVisible"
      :query-id="infoId"
      :view-mode="viewMode"
      @success="getData()"
    ></info-view>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import InfoView from '@/bigcredit/views/letter/abnormal/handler/IndexDialog'
export const enumPayStatus = {
  0: '未支付',
  1: '支付中',
  2: '已支付',
}
export const enumExType = {
  1: '项目取消',
  2: '项目流标',
  3: '项目延期',
  4: '项目过期',
  9: '其它',
}
export const enumExStatus = {
  0: '未核实',
  1: '已核实',
}
export default {
  components: {
    InfoView,
  },
  props: {},
  data() {
    return {
      enumExType,
      enumPayStatus,
      enumExStatus,
      params: {
        index: 1,
        size: 15,
      },
      loading: false,
      totalCount: 0,
      tableName: 'guarantee_ex_view',
      tableData: [],
      tableColumns: [
        { attrs: { label: '序号', prop: 'index', align: 'center' } },
        { attrs: { label: '企业名称', prop: 'enterprise_name', align: 'center' } },
        { attrs: { label: '保函类型', align: 'center' }, process: () => '投标保函' },
        { attrs: { label: '标段/标包编号', prop: 'section', align: 'center' } },
        { attrs: { label: '担保金额（元）', prop: 'tender_bond', align: 'center' } },
        { attrs: { label: '缴费状态', prop: 'payStatus', align: 'center' } },
        { attrs: { label: '异常类型', prop: 'exType', align: 'center' } },
        { attrs: { label: '情况说明', prop: 'ex_des', align: 'center', minWidth: 120 } },
        { attrs: { label: '核实状态', prop: 'exHandleStatus', align: 'center' } },
        {
          attrs: { label: '待处理人', prop: 'ex_handle_person', align: 'center', width: 100 },
          slot: 'person',
        },
        {
          attrs: { label: '操作', align: 'center', width: 100, fixed: 'right' },
          operations: [
            {
              content: '项目核实',
              icon: 'fa fa-edit',
              event: this.handleEdit,
              attrs: { class: 'p-0 m-2' },
              ifRender: row => +row.ex_handle_status === 0 && row.ex_handle_user_id === this.userId,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
              attrs: { class: 'p-0 m-2' },
            },
          ],
        },
      ],

      infoVisible: false,
      viewMode: true,
      infoId: '',
    }
  },
  computed: {
    ...mapGetters(['clientId', 'userId']),
  },
  watch: {},
  created() {
    this.params['service_id.eq'] = this.clientId
    this.getData()
  },
  mounted() {},
  methods: {
    handleEdit(row = {}) {
      this.infoId = row.customer_related_id
      this.infoVisible = true
      this.viewMode = false
    },
    handleView(row = {}) {
      this.infoId = row.customer_related_id
      this.infoVisible = true
      this.viewMode = true
    },
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, { create_time: 'desc' })
        .then(res => {
          const data = res?.data ?? {}
          this.totalCount = data.totalCount ?? 0
          this.tableData = (data.data ?? []).map(this.dataAdapter)
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(row, index) {
      row.index = this.totalCount - index - this.params.size * (this.params.index - 1)
      row.exType = enumExType[row.type]
      row.payStatus = enumPayStatus[row.pay_status]
      row.exHandleStatus = enumExStatus[row.ex_handle_status]
      row.section = row.section_code ? `${row.section_name}-${row.section_code}` : row.section_name
      return row
    },
  },
}
</script>

<style lang="scss" scoped></style>
